<template>
  <div class="flight-list">
    <el-table
      :data="flightList"
      :default-sort="{ prop: 'flightId', order: 'descending' }"
      max-height="250"
    >
      <el-table-column prop="flightId" label="航班" width="110" sortable>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80" sortable>
      </el-table-column>
      <el-table-column prop="arrivalCity" label="始发地" width="140" sortable>
      </el-table-column>
      <el-table-column prop="timePlan" label="计划到达" width="110" sortable>
      </el-table-column>
      <el-table-column prop="timeActual" label="实际到达" width="110" sortable>
      </el-table-column>
      <el-table-column prop="terminal" label="航站楼" width="90" sortable>
      </el-table-column>
      <el-table-column
        prop="gate"
        label="行李转盘"
        width="110"
        sortable
        v-if="radio"
      >
      </el-table-column>
      <el-table-column prop="gate" label="登机口" width="110" sortable v-else>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import axios from 'axios';
import Decoration from '@/components/Common/Decoration.vue';
export default defineComponent({
  name: 'FlightList',
  props: {
    radio: Boolean,
    flightList: {
      type: Array,
    },
  },
  components: { Decoration },
  setup(props, context) {},
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
.flight-list {
  width: 750px;
  padding: 0;
  margin-left: -15px;
  :deep(.el-table .cell) {
    // text-align: center;
  }
}
:deep(.deco) {
  width: 40px;
  float: right;
  margin-left: -2px;
}
:deep(.el-table .ascending .sort-caret.ascending) {
  border-bottom-color: $themeColor;
}
:deep(.el-table .descending .sort-caret.descending) {
  border-top-color: $themeColor;
}
</style>
